<template>
  <view class="index-shou">
    <!-- 搜索 -->
    <search></search>
    <!-- 搜索结束 -->
    <!-- 轮播图 -->
    <swiper
    autoplay
    interval="1000"
    circular
    indicator-dots
    indicator-color="rgba(255,255,255,.3)"
    indicator-active-color="#fff"
    >
      <block v-for="(item,index) in swipers" :key="index">
        <swiper-item>
          <image :src="item.image_src" class="slide-image"></image>
        </swiper-item>
      </block>
    </swiper>
    <!-- 轮播图结束 -->
    <!-- 首页导航开始 -->
    <view class="navigation">
      <view class="nav-one" v-for="(item,index) in navigations" :key="index">
      <image :src="item.image_src"></image>
      </view>
    </view>
    <!-- 首页导航结束 -->
    <!-- 时尚女装开始 -->
    <block v-for="(item, index) in fashions" :key="index">
    <view class="fashion">
      <view class="fashion-head">
        <image :src="item.floor_title.image_src" mode="aspectFit"></image>
      </view>
      <view class="fashion-content">
        <view class="fashion-left">
          <image :src="item.product_list[0].image_src"></image>
        </view>
        <view class="fashion-right">
          <block v-for="(sitem, sindex) in item.product_list" :key="sindex">
          <image v-show="sindex != 0" :src="sitem.image_src"></image>
          </block>
        </view>
      </view>
    </view>
    </block>
    <!-- 时尚女装结束 -->
  </view>
</template>
<script>
import request from '@/utils/request'
import {homePage} from '@/api'
import Search from '@/components/search'
  export default {
    data() {
      return {
        // 轮播图
        swipers: [],
        // 首页导航
        navigations: [],
        // 时尚女装
        fashions: []
      };
    },
    components: {
      Search
    },
    mounted(){
      homePage.getSwiper().then(res=> {
        this.swipers = res.data.message
      })
      homePage.getNavigation().then(res=> {
        this.navigations = res.data.message
      })
      homePage.getFloor().then(res=> {
        this.fashions = res.data.message
      })
    }
  };
</script>
<style >
  .slide-image {
    width: 750rpx;
    height: 340rpx;
  }
  .navigation {
      height: 195rpx;
display: flex;
  }
.navigation .nav-one {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.nav-one image {
width: 128rpx;
height: 140rpx;
}
.fashion-head image {
  width: 100%;
  height: 60rpx;
}
.fashion-content {
  display: flex;
    padding: 20rpx 0 20rpx 20rpx;
}
.fashion-left image{
  width: 232rpx;
  height: 386rpx;
    margin-right: 10rpx;
}
.fashion-right image {
  width: 232rpx;
  height: 188rpx;
  margin-right: 10rpx;
}
</style>